<template>
  <el-form size="mini" label-position="left" label-width="68px" v-model="HInfo">
    <el-card class="margin-bottom">
      <div slot="header" class="clearfix relative small-header">
        <el-row>
          <el-col
            :sm="24"
            :md="24"
            :lg="22"
            :xl="22"
            class="flex  align-center justify-start"
          >
            <div class="title-icon ">
              <span>H单 </span>
            </div>
            <el-form-item
              prop="houseNumberSender"
              class="margin-lr"
              style="margin-bottom:0"
            >
              <div v-if="isChangeHno" slot="label">H单号:</div>
              <el-input
                v-if="isChangeHno"
                type="text"
                size="mini"
                v-model="HInfo.houseNumber"
              ></el-input>

              <span v-else>H单号:{{ HInfo.houseNumber }}</span>
            </el-form-item>
            <el-form-item class="margin-lr" style="margin-bottom:0">
              <!-- v-if="HInfo.orderLocked != 1" -->
              <el-button type="text" size="mini" @click="isSavechangeHo">
                {{ isChangeHno ? "保存" : "编辑" }}
              </el-button>
            </el-form-item>
          </el-col>
          <el-col
            :sm="24"
            :md="24"
            :lg="2"
            :xl="2"
            class="flex  align-center justify-end"
          >
            <el-button
              size="mini"
              type="success"
              class="header-cancel-btn"
              @click="CopyHorMOrderInfo"
            >复制</el-button
            >
            <CopyHorMOrder
              ref="CopyHorMOrderV"
              :waybillId="HInfo.id">
            </CopyHorMOrder>
            <el-button
              size="mini"
              type="info"
              class="header-cancel-btn"
              v-if="isChangeHInfo"
              @click="isChangeHInfo = false"
              >取消</el-button
            >
            <el-button
              type="success"
              size="mini"
              class="header-save-btn"
              @click="changeHInfo"
            >
              {{ isChangeHInfo ? "保存" : "编辑" }}
            </el-button>
          </el-col>
        </el-row>
      </div>

      <el-row :gutter="10">
        <el-col :span="4">
          <el-form-item prop="houseNumberSender">
            <div slot="label">发件人:</div>

            <div v-if="isChangeHInfo">
              <el-select
                v-model="HInfo.serachSender"
                filterable
                placeholder="请输入内容"
              >
                <el-option
                  v-for="item in restaurants"
                  :key="item.value"
                  :label="item.label"
                  @click.native="selectSenderM('houseNumberSender')"
                  :value="item.value"
                >
                </el-option>
              </el-select>

              <el-input
                type="textarea"
                :autosize="{ minRows: 7, maxRows: 12 }"
                v-model="HInfo.houseNumberSender"
              ></el-input>
            </div>
            <div class="icoFontlist" :title="HInfo.houseNumberSender" v-else>
              {{ HInfo.houseNumberSender }}
            </div>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item prop="houseNumberReceiver">
            <div slot="label">收件人:</div>

            <div v-if="isChangeHInfo">
              <el-select
                v-model="HInfo.serachReceiver"
                filterable
                placeholder="请输入内容"
              >
                <el-option
                  v-for="item in restaurants"
                  :key="item.value"
                  :label="item.label"
                  @click.native="selectSenderM('houseNumberReceiver')"
                  :value="item.value"
                >
                </el-option>
              </el-select>

              <el-input
                type="textarea"
                :autosize="{ minRows: 7, maxRows: 12 }"
                v-model="HInfo.houseNumberReceiver"
              ></el-input>
            </div>
            <span v-else>{{ HInfo.houseNumberReceiver }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item prop="houseNumberNotifier">
            <div slot="label">通知人:</div>

            <div v-if="isChangeHInfo">
              <el-select
                v-model="HInfo.serachNotifier"
                filterable
                placeholder="请输入内容"
              >
                <el-option
                  v-for="item in restaurants"
                  :key="item.value"
                  :label="item.label"
                  @click.native="selectSenderM('houseNumberNotifier')"
                  :value="item.value"
                >
                </el-option>
              </el-select>

              <el-input
                type="textarea"
                :autosize="{ minRows: 7, maxRows: 12 }"
                v-model="HInfo.houseNumberNotifier"
              ></el-input>
            </div>
            <span v-else>{{ HInfo.houseNumberNotifier }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item prop="houseNumberAgent">
            <div slot="label">代理:</div>

            <div v-if="isChangeHInfo">
              <el-select
                v-model="HInfo.serachAgent"
                filterable
                placeholder="请输入内容"
              >
                <el-option
                  v-for="item in restaurants"
                  :key="item.value"
                  :label="item.label"
                  @click.native="selectSenderM('houseNumberAgent')"
                  :value="item.value"
                >
                </el-option>
              </el-select>

              <el-input
                type="textarea"
                :autosize="{ minRows: 7, maxRows: 12 }"
                v-model="HInfo.houseNumberAgent"
              ></el-input>
            </div>
            <span v-else>{{ HInfo.houseNumberAgent }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item prop="shippingMark">
            <div slot="label">唛头:</div>
            <el-input
              type="textarea"
              :autosize="{ minRows: 7, maxRows: 12 }"
              v-model="HInfo.shippingMark"
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-card>
  </el-form>

</template>

<script>
import { ajax } from "@/store/yg/common/utils";
import CopyHorMOrder from "./CopyHouseOrder";


export default {
  props: {
    pageType: {
      type: String,
      default: ""
    },
    waybillData: {}
  },
  components: {
    CopyHorMOrder
  },
  data() {
    return {
      showFlag: "2",
      isChangeHno: false,
      isChangeHInfo: false,
      restaurants: [],
      dialogTableVisible: false,
      copyHouseShow:false,
      HInfo: {
        id: 0,
        waybillId: 0,
        houseNumber: 1, // H单号：
        houseNumberSender: 1, // H单号：发件人
        houseNumberReceiver: 1, // H单号：收件人
        houseNumberNotifier: 1, // H单号：通知人
        houseNumberAgent: 1, // H单号：代理
        serachSender: "",
        serachReceiver: "",
        serachNotifier: "",
        serachAgent: ""
      }
    };
  },
  mounted() {
    this.restaurants = this.loadAll();
    var constHInfo = {};
    constHInfo.id = this.waybillData.id;
    constHInfo.waybillId = this.waybillData.id;
    constHInfo.houseNumber = this.waybillData.houseNumber;
    constHInfo.houseNumberSender = this.waybillData.houseNumberSender;
    constHInfo.houseNumberReceiver = this.waybillData.houseNumberReceiver;
    constHInfo.houseNumberNotifier = this.waybillData.houseNumberNotifier;
    constHInfo.houseNumberAgent = this.waybillData.houseNumberAgent;
    constHInfo.serachSender = this.waybillData.serachSender;
    constHInfo.serachReceiver = this.waybillData.serachReceiver;
    constHInfo.serachNotifier = this.waybillData.serachNotifier;
    constHInfo.serachAgent = this.waybillData.serachAgent;
    constHInfo.shippingMark = this.waybillData.shippingMark;
    this.HInfo = constHInfo;

    if (
      this.HInfo.houseNumberNotifier == null ||
      this.HInfo.houseNumberNotifier == ""
    ) {
      this.HInfo.houseNumberNotifier = "SAME AS CONSIGNEE";
    }
    this.HInfo.waybillId = this.waybillData["id"];
    console.log("H信息", this.waybillData);
  },
  methods: {
    selectSenderM(type) {
      var parmValue = "";
      if (type === "houseNumberSender") {
        parmValue = this.HInfo.serachSender;
      } else if (type === "houseNumberReceiver") {
        parmValue = this.HInfo.serachReceiver;
      } else if (type === "houseNumberNotifier") {
        parmValue = this.HInfo.serachNotifier;
      } else if (type === "houseNumberAgent") {
        parmValue = this.HInfo.serachAgent;
      }
      ajax("queryServiceCompanyById", { id: parmValue }).then(
        res => {
          if (res.code != 200) {
            this.$message.error(res.message);
          } else {
            if (null != res.data) {
              var serviceCompany = res.data;
              var html =
                serviceCompany["companyNameEn"] +
                "\n" +
                serviceCompany["companyAddressEn"] +
                "\n" +
                "TEL:" +
                serviceCompany["firstContactPhone"] +
                "\n" +
                serviceCompany["vatNumber"];
              this.$set(this.HInfo, type, html);
            }
          }
        },
        error => {
          console.log(error);
        }
      );
    },

    loadAll() {
      ajax("getOptionsByparam", { type: "serveCompany" }).then(
        res => {
          if (res.code != 200) {
            this.$message.error(res.message);
          } else {
            if (null != res.data) {
              this.restaurants = res.data;
            }
          }
        },
        error => {
          console.log(error);
        }
      );
    },

    isSavechangeHo() {
      if (this.isChangeHno) {
        this.isChangeHno = false;
        var param = this.HInfo;
        ajax("changeHInfo", param).then(
          res => {
            console.log(res);
            if (res.code != 200) {
              this.$message.error(res.message);
            } else {
              this.$message.success("保存成功");
            }
          },
          error => {
            console.log(error);
          }
        );
      } else {
        this.isChangeHno = true;
      }
    },

    changeHInfo() {
      if (this.isChangeHInfo) {
        this.isChangeHInfo = false;
        var param = this.HInfo;
        ajax("changeHInfo", param).then(
          res => {
            console.log(res);
            if (res.code != 200) {
              this.$message.error(res.message);
            } else {
              this.$message.success("保存成功");
            }
          },
          error => {
            console.log(error);
          }
        );
      } else {
        this.isChangeHInfo = true;
      }
    },
    CopyHorMOrderInfo(){
      console.log(this.$refs.CopyHorMOrderV)
      this.$refs.CopyHorMOrderV.CopyHouseOrderVisible = true;
    }
  }
};
</script>

<style scoped>
/deep/ .el-select {
  width: 100%;
}

.btn-header >>> .el-card__header {
  padding: 8px 20px;
}
.icoFontlist {
  width: 100%;
  font-size: 12px;
  overflow: hidden;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
}
</style>
